import chart from '@/utils/chart.js'
import { toYYYYMMDD, toHHMM, toMMDD, formatTimeStamp } from '@/utils/timeUtil'
import { parseNumFloat } from '@/utils/tool'
import { keyToZh, valToZh } from './codeMaps.js'
import { ONE_DAY_MS } from './consts.js'
export const chartTemHum = (chartData, time_start, time_end, isOneDay) => {

  let temItem = { key: 'tem', color: '#8DBAF3' }
  let humItem = { key: 'hum', color: '#fda857' }
  let series = []
  let o = {
    data: [],
    name:  keyToZh(temItem.key),
    ...chart.ECHART_LINE_CONFIG_BIG_DATA,
    ...chart.styleConfig(temItem.color, 'solid', true),
  }
  let p = {
    data:[],
    yAxisIndex: 1,
    name:  keyToZh(humItem.key),
    ...chart.ECHART_LINE_CONFIG_BIG_DATA,
    ...chart.styleConfig(humItem.color, 'solid', false)
  }

  for (let data of chartData) {
    o.data.push([data.upload, data.data[temItem.key]])
    p.data.push([data.upload, data.data[humItem.key]])
  }

  series.push(o,p)
 
  console.log('---------series----', series)
  
  let xInterval = 1
    if (time_end - time_start >= 11 * 24 * 3600 * 1000) {
      xInterval = 4
  }
  let xAxisConfig = null
  // 选择 一天 的x轴config
if (isOneDay) {
  xAxisConfig = {
    splitLine: {
      show: false
    },
    type: 'time',
    maxInterval: 1 * 3600 * 1000,
    min: function (value) {
      let todayStart = new Date(
        new Date(value.min).toLocaleDateString()
      ).getTime()
      return todayStart
    },
    max: function (value) {
      let todayStart = new Date(
        new Date(value.min).toLocaleDateString()
      ).getTime()
      let todayEnd = todayStart + ONE_DAY_MS
      return todayEnd
    },
    axisLabel: {
      show: true,
      color: '#c3c6cd',
      rotate: 30,
      formatter: (value, index) => {
        let t = toHHMM(new Date(value).getTime())
        return `${t}`
      }
    }
    // data: xData
  }
} else {
  // 选择 多天 的x轴config
  xAxisConfig = {
    splitLine: {
      show: false
    },
    type: 'time',
    maxInterval: 3 * 3600 * 24 * 1000,
    min: function (value) {
      let todayStart = value.min
      return todayStart
    },
    max: function (value) {
      let todayEnd = value.max
      return todayEnd
    },
    axisLabel: {
      show: true,
      color: '#c3c6cd',
      rotate: 0,
      formatter: (value, index) => {
        let d = toMMDD(new Date(value).getTime())
        let t = toHHMM(new Date(value).getTime())
        return `${d} ${t}`
      }
    }
    // data: xData
  }
}

  let option = {
    legend:{
      icon: "circle",
      x:'right',
      padding:[20, 100,0,0],
      data: ["湿度","温度"],
      textStyle: { color: "#F1F2F4" },
    },
    grid: {
      top:'50',
      left: '4%',
      right: '4%',
      bottom: '0%',
      containLabel: true
    },
    tooltip: {
      ...chart.TOOLTIP,
      formatter: (params, ticket) => {
        let s = ''
        s = s + formatTimeStamp(params[0].axisValue) + `<br/>`

        for (let item of params) {
          let unit = ''
          if (item.seriesName.indexOf('温度') >= 0) {
            unit = '°C'
            s += `<span style="color:${item.color}">
                  <span  class="tooltip-m">${item.seriesName}: </span>${parseNumFloat(item.value[1])}${unit}</span></br>`
          }
          if (item.seriesName.indexOf('湿度') >= 0) {
            unit = '%RH'
            s += `<span style="color:${item.color}">
                  <span  class="tooltip-m">${item.seriesName}: </span>${parseNumFloat(item.value[1])}${unit}</span></br>`
          }
        }
        return s
      }
    },
    dataZoom: [
      {
        type: 'inside',
        throttle: 50
      }
    ],
    xAxis: {
      type: 'time',
      ...xAxisConfig,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#6E798B'
        }
      },
      axisTick:{
        show:false
      }
    },
    yAxis:[
      {
        name: '°C         ',
        type: 'value',
        ...chart.AXIS_STYLE,
      },
      {
        name: '        %RH',
        type: 'value',
        ...chart.AXIS_STYLE,
        splitLine:{
          show:false
        }
      },
    ],
    series: series
  }
  return option
}